<script setup lang="ts">
import { Search, Plus } from '@element-plus/icons-vue';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { useDictionaryStore } from '@/store'
import { ClassAPI, StaffAPI } from "@/api";
import { ElMessage, FormInstance } from 'element-plus';
import { httpBatch } from '@/util/http';
import { useClassroomStore } from '@/store';

const classroomStore = useClassroomStore();
const formRef = ref<FormInstance | null>(null);
const dictionaryStore = useDictionaryStore();
const teacherList = ref<Vm.Staff[]>([]);
const teacher = ref<Vm.Staff[]>([]);
const admin = ref<Vm.Staff[]>([]);
const job = ref<Vm.Staff[]>([]);
const newList = ref<Vm.Dictionary[]>([]);
const edit = reactive<{ type: 1 | 2 }>({
    type: 1
});
const beginModel = reactive<{ cls_id: number, cls_clsr_id: number }>({
    cls_id: 0,
    cls_clsr_id: 0
})
const editModel = reactive<{ isEdit: boolean, isClass: boolean, clsr_id: number, model: Vm.Class }>({
    isEdit: false,
    isClass: false,
    clsr_id: 0,
    model: {
        cls_id: 0,
        cls_name: "",
        cls_dic_id_major: 0,
        cls_clsr_id: null,
        cls_stf_id_teacher: 0,
        cls_stf_id_admin: 0,
        cls_stf_id_job: 0,
        cls_begin: null,
        cls_end: null,
        cls_remark: "",
    }
});
const staffModel = reactive<HttpPayload.Staff>({
    stf_category: 0,
    stf_name: '',
    begin: 0,
    pageSize: 99,
})
const searchModel = reactive<HttpPayload.ClassSeach>({
    cls_name: "",
    cls_dic_id_major: 0,
    cls_status: 0,
    begin: 0,
    pageSize: 5
});
const pagination = reactive({
    total: 0, currentPage: 1
});
const cList = ref<Vm.Class[]>([]);
const getData = async (fromPage1 = true) => {
    if (fromPage1) pagination.currentPage = 1;
    searchModel.begin = (pagination.currentPage - 1) * searchModel.pageSize;
    try {
        const { total, list } = await ClassAPI.get(searchModel);
        if (total > 0 && list.length === 0) {
            pagination.currentPage = Math.ceil(total / searchModel.pageSize);
            await getData(false);
            return;
        }
        pagination.total = total;
        cList.value = list;
    } catch (e) { };
};
const getIndex = (rowIndex: number) => {
    return (pagination.currentPage - 1) * searchModel.pageSize + rowIndex + 1;
};
const listbycategory = async () => {
    const { total, list } = await StaffAPI.get(staffModel);
    pagination.total = total;
    teacherList.value = list;
};
// 获取全部数据
onMounted(async () => {
    try {
        await httpBatch([() => dictionaryStore.init(), () => listbycategory(), () => getData(), () => classroomStore.init()], true)
        teacherList.value.forEach((item: Vm.Staff) => { if (item.stf_category === 4) teacher.value.push(item) })
        teacherList.value.forEach((item: Vm.Staff) => { if (item.stf_category === 5) admin.value.push(item) })
        teacherList.value.forEach((item: Vm.Staff) => { if (item.stf_category === 6) job.value.push(item) })
        dictionaryStore.list.forEach((item: Vm.Dictionary) => { if (item.dic_group_key === 'class_major') newList.value.push(item) })
    } catch (e) { }
});
const add = () => {
    edit.type = 1;
    formRef.value?.resetFields();
    editModel.model.cls_id = 0;
    editModel.model.cls_name = "";
    editModel.model.cls_dic_id_major = 0;
    editModel.model.cls_remark = "";
    editModel.model.cls_stf_id_teacher = 0;
    editModel.model.cls_stf_id_admin = 0;
    editModel.model.cls_stf_id_job = 0;
    editModel.model.cls_clsr_id = null;
    editModel.model.cls_end = null;
    editModel.model.cls_begin = null;
    nextTick(() => editModel.isClass = true);
};
const update = (cls: Vm.Class) => {
    edit.type = 2;
    formRef.value?.resetFields();
    editModel.model.cls_id = cls.cls_id;
    editModel.model.cls_name = cls.cls_name;
    editModel.model.cls_dic_id_major = cls.cls_dic_id_major;
    editModel.model.cls_stf_id_teacher = cls.cls_stf_id_teacher;
    editModel.model.cls_stf_id_admin = cls.cls_stf_id_admin;
    editModel.model.cls_stf_id_job = cls.cls_stf_id_job;
    editModel.model.cls_begin = cls.cls_begin;
    editModel.model.cls_end = cls.cls_end;
    editModel.model.cls_remark = cls.cls_remark;
    nextTick(() => editModel.isClass = true);
};
const save = async () => {
    try {
        await formRef.value?.validate();
        if (editModel.model.cls_id === 0) {
            await ClassAPI.add(editModel.model)
        } else {
            await ClassAPI.update(editModel.model)
        }
        editModel.isClass = false;
        ElMessage({ message: `操作成功`, type: "success" })
        await getData();
    } catch (e) { }

};
const begin = (data: { cls_id: number, cls_clsr_id: number }) => {
    beginModel.cls_id = data.cls_id;
    beginModel.cls_clsr_id = data.cls_clsr_id;
    nextTick(() => editModel.isEdit = true);
};
const end = async (data: { cls_id: number }) => {
    await httpBatch([() => ClassAPI.end(data), () => getData()], true);
    beginModel.cls_id = data.cls_id;
};
const saveClsr = async () => {
    await httpBatch([() => ClassAPI.begin(beginModel), () => getData(false), () => classroomStore.init()], true);
    editModel.isEdit = false;
    console.log(beginModel);
    ElMessage({ message: "教室分配成功", type: "success", customClass: "messageIndex" });
};
</script>

<template>
    <el-container>
        <el-header height="40px">
            <el-form class="header" :inline="true">
                <el-form-item label="班级名称:">
                    <el-input :prefix-icon="Search" placeholder="请输入班级名称..." v-model="searchModel.cls_name"
                        @change="getData()"></el-input>
                </el-form-item>
                <el-form-item label="班级专业:">
                    <el-select v-model="searchModel.cls_dic_id_major" @change="getData()">
                        <el-option :value="0" label="- 请选择 -"></el-option>
                        <el-option v-for="item in newList" :key="item.dic_id" :value="item.dic_id"
                            :label="item.dic_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级状态:">
                    <el-select v-model="searchModel.cls_status" @change="getData()">
                        <el-option :value="0" label="- 所有 -"></el-option>
                        <el-option value="1" label="开课中"></el-option>
                        <el-option value="2" label="未开课"></el-option>
                        <el-option value="3" label="结课"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button :icon="Plus" type="success" @click="add">新增</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="cList" border stripe highlight-current-row ref="tableRef">
                <el-table-column type="index" :index="getIndex" label="#" width="50px" align="center" />
                <el-table-column prop="cls_name" label="班级名称" width="120px" align="center" />
                <el-table-column prop="cls_dic_id_major" label="班级专业" width="100px" align="center">
                    <template #default="{ row }">
                        <span v-if="row.cls_dic_id_major">{{
                                dictionaryStore.list.find(item => item.dic_id === row.cls_dic_id_major)?.dic_name
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cls_stf_id_teacher_name" label="教学老师" width="100px" align="center" />
                <el-table-column prop="cls_stf_id_admin_name" label="教务老师" width="100px" align="center" />
                <el-table-column prop="cls_stf_id_job_name" label="就业老师" width="100px" align="center" />
                <el-table-column prop="cla_clsr_id" label="教室" width="120px" align="center">
                    <template #default="{ row }">
                        <span>{{ classroomStore.classroomList.find(item => item.clsr_id ===
                                row.cls_clsr_id)?.clsr_name
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cls_begin" label="开课时间" width="150px" align="center">
                    <template #default="{ row }">
                        <span>{{ row.cls_begin }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cls_end" label="结课时间" width="150px" align="center">
                    <template #default="{ row }">
                        <span>{{ row.cls_end }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="班级状态" width="100px" align="center">
                    <template #default="{ row }">
                        <span v-if="!row.cls_begin && !row.cls_end">未开课</span>
                        <span v-if="row.cls_begin && !row.cls_end">已开课</span>
                        <span v-if="row.cls_begin && row.cls_end">结课</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cls_remark" label="备注" width="225px" />
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="primary" @click="update(row)">修改</el-button>
                        <el-button type="success" @click="begin(row)" v-if="!row.cls_begin && !row.cls_end">开课
                        </el-button>
                        <el-button type="danger" @click="end(row)" v-else="row.cls_begin && !row.cls_end">结课
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-dialog :model-value="editModel.isClass" width="500px">
            <template #header>
                <p class="header-text">新增-修改</p>
            </template>
            <el-form :model="editModel.model">
                <el-form-item label="班级名称">
                    <el-input v-model="editModel.model.cls_name"></el-input>
                </el-form-item>
                <el-form-item label="班级专业">
                    <el-select v-model="editModel.model.cls_dic_id_major">
                        <el-option :value="0" label="- 请选择 -"></el-option>
                        <el-option v-for="item in newList" :key="item.dic_id" :value="item.dic_id"
                            :label="item.dic_name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教学老师">
                    <el-select v-model="editModel.model.cls_stf_id_teacher">
                        <el-option :value="0" label="- 请选择 -"></el-option>
                        <el-option v-for="item in teacher" :key="item.stf_id" :value="item.stf_id"
                            :label="item.stf_name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教务老师">
                    <el-select v-model="editModel.model.cls_stf_id_admin">
                        <el-option :value="0" label="- 请选择 -"></el-option>
                        <el-option v-for="item in admin" :key="item.stf_id" :value="item.stf_id" :label="item.stf_name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="就业老师">
                    <el-select v-model="editModel.model.cls_stf_id_job">
                        <el-option :value="0" label="- 请选择 -"></el-option>
                        <el-option v-for="item in job" :key="item.stf_id" :value="item.stf_id" :label="item.stf_name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级备注" height="100">
                    <el-input v-model="editModel.model.cls_remark"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editModel.isClass = false">取消</el-button>
                <el-button @click="save">确定</el-button>
            </template>
        </el-dialog>

        <el-dialog :model-value="editModel.isEdit" width="500px">
            <template #header>
                <p class="header-text">选择班级</p>
            </template>
            <el-form>
                <el-form-item label="班级名称">
                    <el-select v-model="beginModel.cls_clsr_id">
                        <el-option :value="0" label="- 请选择 -"></el-option>
                        <el-option v-for="item in classroomStore.classroomList" :key="item.clsr_id"
                            :value="item.clsr_id" :label="item.clsr_name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editModel.isEdit = false">取消</el-button>
                <el-button @click="saveClsr">分配</el-button>
            </template>
        </el-dialog>
        <el-footer height="36px">
            <el-pagination background layout="prev, pager, next, jumper,->, sizes, total " :total="pagination.total"
                :page-sizes="[3, 6, 9, 12]" v-model:page-size="searchModel.pageSize"
                v-model:current-page="pagination.currentPage" @size-change="getData()"
                @current-change="getData(false)" />
        </el-footer>
    </el-container>


</template>

<style scoped>
</style>